<template>
  <div id="nszychart" style="width: 1438px; height: 350px">

  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, watch} from "vue";


const props = defineProps(["tableData"])
const emits = defineEmits(["getNsInfobyZyr"])
let nyData = {}
const dataZyr = []
const dataZyl = []

const initChart = (() => {
  const chartDom = document.getElementById('nszychart')
 /* 初始化之前检查该元素上是否已经有 echarts 实例，如果有则先销毁该实例再进行初始化。*/
  if (chartDom.getAttribute('_echarts_instance_')) {
    echarts.getInstanceByDom(chartDom).dispose()
  }
  const myChart = echarts.init(chartDom)

  for (let i = 0; i < props.tableData.length; ++i) {
    nyData[props.tableData[i].zyr] = (nyData[props.tableData[i].zyr] || 0) + 1
  }

  for (let zyr in nyData) {
    dataZyr.push(zyr)
    dataZyl.push(nyData[zyr])
  }

/*  myChart.resize({
    width: 1438,
    height: 350
  })*/

  const option = {
    title: {
      text: '农事作业详情',
      left: 'center'
    },
    // 设置提示框的相关属性
    tooltip: {
      // trigger属性来指定tooltip的触发方式, item（数据项触发）
      trigger: 'item'
    },
    grid: {
      // 调整左右伸缩
      left: "150",
      right: "150",
      bottom: "40",
      top: "80",
      // 是否隐藏y轴的文字，true代表不隐藏
      containLabel: true
    },
    legend: {
      // Try 'horizontal'
      orient: 'vertical',
      top: 'center'
    },
    xAxis: {
      data: dataZyr,
      // 设置x轴名称
      name: "作业人",
      type: 'category',
      axisTick: {
        // 是否展示轴的刻度线
        show: false
      },
      axisLabel: {
        // x轴文本的颜色
        textStyle: {
          color: "#7c7d81"
        }
      },
      axisLine: {
        // x轴的颜色
        lineStyle: {
          color: "#64748B"
        }
      }
    },
    yAxis: {
      name: "作业量（条）",
      type: 'value',
      // y轴name与横纵坐标轴线的间距
      nameGap: 10,
      nameTextStyle: {
        color: "#aaa",
        //上右下左与原位置距离
        padding: [0, 0, 25, -50]
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: "#eeeef0"
        }
      },
      axisLabel: {
        margin: 50,
        textStyle: {
          color: "#7c7d81",
          align: "left"
        }
      },
      axisLine: {
        // 是否显示轴的线
        show: false
      },
    },
    series: [
      {
        symbol: "circle",
        // 柱子宽度
        barWidth: 45,
        //实现数字展示在柱状图
        label: {
            show:true,
            position:"top",
            color:"#3F85FF",
            fontWeight:"bold",
        },
        type: 'bar',
        data: dataZyl,
        barCategoryGap: '50%',
        itemStyle: {
          normal: {
            color:"#8DB7FF",
            barBorderRadius:[4,4,0,0],//设置柱子圆角
          },
        },
      }
    ]
  }
  myChart.setOption(option)
  myChart.on('click', function(params) {
    console.log(params)
    emits("getNsInfobyZyr", params.name)
  }, { passive: true })
})

/*
* getElementById()需在dom创建时获取，故需在onMounted中先使用
*
* 否则可能在初始化时该元素还未被渲染到DOM中，导致获取失败。
* */
onMounted(() => {
  initChart()
})

/* 解决刷新一下图表就不见的问题
*
* 因为每次更新props.tableData时，图表并没有被重新渲染，导致图表在刷新后消失。
* 所以可以尝试在组件中使用watch监听props.tableData的变化，并在变化时重新渲染图表
*
*/
watch(() => props.tableData, () => {
  nyData = {}
  dataZyr.length = 0
  dataZyl.length = 0
  initChart()
})
</script>

<style scoped>

</style>